<template>
  <Layout>
    <el-form :model="form" label-width="120px">
      <el-form-item label="用户名" style="margin-top: 5%; margin-left: 20%">
        <el-input disabled v-model="form.username" style="width: 500px" />
      </el-form-item>
      <el-form-item label="邮箱" style="margin-left: 20%">
        <el-input @change="infoChange" v-model="form.email" style="width: 500px" />
      </el-form-item>
      <el-form-item label="姓名" style="margin-left: 20%">
        <el-input
          @change="infoChange"
          v-model="form.firstname"
          placeholder="姓"
          style="width: 240px; margin-right: 10px"
        />
        <el-input
          @change="infoChange"
          v-model="form.lastname"
          placeholder="名"
          style="width: 240px; margin-left: 10px"
        />
      </el-form-item>
      <el-form-item label="地址" style="margin-left: 20%">
        <el-select
          v-model="pname"
          @change="choseProvince"
          :placeholder="form.state"
          style="width: 160px; margin-right: 5px"
        >
          <el-option v-for="(item, $index) in province" :key="$index" :label="item.value" :value="item.value" />
        </el-select>
        <el-select style="width: 160px; margin-right: 5px" v-model="cname" @change="choseCity" :placeholder="form.city">
          <el-option v-for="(item, $index) in city" :key="$index" :label="item.value" :value="item.value" />
        </el-select>
        <el-select style="width: 170px" v-model="bname" @change="choseBlock" :placeholder="form.zip">
          <el-option v-for="(item, $index) in block" :key="$index" :label="item.value" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" style="margin-left: 20%">
        <el-input @change="infoChange" v-model="form.address1" style="width: 500px" />
      </el-form-item>
      <el-form-item label="联系电话" style="margin-left: 20%">
        <el-input @change="infoChange" v-model="form.phone" style="width: 500px" />
      </el-form-item>
      <el-form-item style="margin-left: 25%">
        <el-button type="primary" :disabled="disabled" @click="onSubmit" style="width: 150px">确定</el-button>
        <el-button @click="onCancel" style="margin-left: 10%; width: 150px">取消</el-button>
      </el-form-item>
    </el-form>
  </Layout>
</template>

<script>
import { reactive } from "vue"
import axios from "axios"
import json from "@/store/address"
import Layout from "@/views/layout/Layout.vue"

let Pform = {}
export default {
  name: "Test",
  components: { Layout },
  data() {
    return {
      disabled: true,
      districts: json,
      province: [],
      city: [],
      block: [],
      pname: "",
      cname: "",
      bname: "",
      form: reactive({})
    }
  },
  created() {
    const _this = this
    _this.form = JSON.parse(sessionStorage.getItem("account"))
  },
  methods: {
    infoChange: function () {
      Pform = this.form
      if (!this.pname == "") Pform.state = this.pname
      if (!this.cname == "") Pform.city = this.cname
      if (!this.bname == "") Pform.zip = this.bname
      this.disabled = false
    },
    // 加载china地点数据，三级
    getData: function () {
      const that = this
      that.districts.forEach(function (item, index) {
        //省级数据
        that.province.push({
          value: item.name,
          children: item.city
        })
      })
    },
    // 选省
    choseProvince: function (e) {
      const that = this
      that.city = []
      that.block = []
      that.cname = ""
      that.bname = ""
      that.province.forEach((item, index) => {
        if (e === item.value) {
          const shi = item.children
          that.pname = item.value
          shi.forEach(function (citem, cindex) {
            that.city.push({
              value: citem.name,
              children: citem.districtAndCounty
            })
          })
        }
      })
      that.infoChange()
    },
    // 选市
    choseCity: function (e) {
      const that = this
      that.block = []
      that.bname = ""
      that.city.forEach((item, index) => {
        if (e === item.value) {
          const qu = item.children
          that.cname = item.value
          qu.forEach(function (bitem, bindex) {
            that.block.push({
              value: bitem
            })
          })
        }
      })
      that.infoChange()
    },
    // 选区
    choseBlock: function (e) {
      this.bname = e
      this.infoChange()
    },
    onSubmit: () => {
      const param = new URLSearchParams()
      param.append("username", Pform.username)
      param.append("email", Pform.email)
      param.append("firstname", Pform.firstname)
      param.append("lastname", Pform.lastname)
      param.append("status", Pform.status)
      param.append("address1", Pform.address1)
      param.append("address2", Pform.address2)
      param.append("city", Pform.city)
      param.append("state", Pform.state)
      param.append("zip", Pform.zip)
      param.append("country", Pform.country)
      param.append("phone", Pform.phone)
      axios.post("http://localhost:8081/postInfo", param)
      alert("更新成功")
    },
    onCancel: () => {
      //退出该页面
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped></style>
